<template>
	<view class="vip-center-page">
		<view class="top-bg">

			<view class="card">
				<view class="flex-s">
					<image class="uer-avatar" :src="user?.avatar" alt="Profile Image" />
					<view>
						<view class="name">{{ user?.nickname }}</view>
						<view class="id">ID: {{ user?.id }}</view>
					</view>
				</view>
				<view class="expiry" v-if="user?.viptime">会员效期：{{ user?.viptime }}</view>
			</view>
		</view>
		<UnlockVip @unLockSuccess="unLockSuccess" :showNote="true"></UnlockVip>
	</view>
</template>

<script lang="ts" setup>
import UnlockVip from '@/components/unlock-vip/unlock-vip.vue'
import { useAuth } from '@/hooks';

const { user, login } = useAuth()
uni.setNavigationBarTitle({ title: '会员中心' });


const unLockSuccess = async () => {
	login()
}
</script>

<style lang="scss" scoped>
.flex-s {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.vip-center-page {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #151515;
	overflow-y: auto;

	.top-bg {
		width: 100%;
		height: 478rpx;
		background:url(#{$imgBaseUrl}vip-center-top-bg.webp) no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.card {
		margin-top: 258rpx;
		margin-left: 48rpx;
	}

	.card .uer-avatar {
		border-radius: 50%;
		width: 92rpx;
		height: 92rpx;
		margin-right: 24rpx;
	}

	.card .name {
		font-size: 26rpx;
		color: #FFD987;
	}

	.card .id {
		font-size: 22rpx;
		color: #FFD987;
		margin-top: 8rpx;
	}

	.card .expiry {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}
</style>